<template>
  <n-form
    :model="formData"
    :rules="formRules"
    ref="formInstance"
    label-placement="left"
    :label-width="SlashAppContext.getCoefficient() * 80 + 'px'"
  >
    <n-alert style="margin-bottom: 15px" title="提示" type="warning">
      批量配置用户信息时，将清除用户原有的相关数据，配置数据时未填写的字段不会生效，请谨慎操作！
    </n-alert>
    <n-grid x-gap="12" :cols="2" responsive="self">
      <n-gi :span="resource === 'baseinfo' ? 1 : 2">
        <n-form-item label="头像" path="headImgAddress">
          <n-avatar :size="120" :src="avatar" @click="onSelectHeadImg">
            <span v-if="avatar.length == 0">点击选择图片</span>
          </n-avatar>
        </n-form-item>
      </n-gi>

      <n-gi :span="resource === 'baseinfo' ? 1 : 2">
        <n-form-item label="账号状态" path="enabled">
          <n-radio-group v-model:value="formData.isLock" :disabled="resource === 'baseinfo'">
            <n-space>
              <n-radio
                :key="it.value"
                v-for="it in isLockOptions"
                :value="it.value"
                :label="it.label"
              />
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="部门" path="fkDeptCode">
          <n-tree-select
            placeholder="请选择部门"
            filterable
            key-field="fullDeptCode"
            label-field="deptName"
            :default-value="formData.fkDeptCode"
            :options="deptOptions"
            v-model:value="formData.fkDeptCode"
            @update:value="onSelectDept"
            default-expand-all
            :disabled="resource === 'baseinfo'"
          />
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="岗位" path="fkPostId">
          <n-select
            placeholder="请选择岗位"
            v-model:value="formData.fkPostId"
            :options="postOptions"
            :disabled="resource === 'baseinfo'"
          />
        </n-form-item>
      </n-gi>
      <n-gi :span="2">
        <n-form-item label="角色" path="fkDeptCode">
          <n-select
            placeholder="请选择角色"
            multiple
            v-model:value="formData.roleCodeList"
            :options="roleOptions"
            :disabled="resource === 'baseinfo'"
          />
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>
<script lang="ts">
  import { onMounted, ref } from 'vue';
  import {
    getDeptOptions,
    enabledOptions,
    formRules,
    isLockOptions,
    getPostOptions,
    getRoleOptions,
    sexOptions,
  } from './Service';
  import httpApi from './httpApi';
  import { FormInst } from 'naive-ui';
  import { checkFormData, SlashAppContext } from 'slash-admin';
  import { Layer } from 'slash-layer';
  import { PropType, watch } from 'vue';

  export default {
    props: {
      id: {
        type: [String, Number, Array],
        default: null,
      },
      readMode: {
        type: [String],
        default: 'read',
      },
      resource: {
        type: String as PropType<'usermanage' | 'baseinfo'>,
        default: 'usermanage',
      },
    },
    setup: function (props) {
      const formInstance = ref<FormInst | null>(null);
      const formData = ref<any>({});
      const roleOptions = ref<any>();
      const postOptions = ref<any>();
      const deptOptions = ref<any>();

      const avatar = ref<string>('');

      async function onSelectDept(row) {
        formData.fkDeptCode = row;
      }

      async function onSelectHeadImg(row) {
        const file: any = await Layer.selectFile({
          accept: ['.jpg', '.png', '.jpeg'],
        });
        if (file.length == 0) {
          Layer.error('请选择一张图片');
          return;
        }
        const { data } = await httpApi.doUploadHeadImg([file[0]]);
        console.log('计算结果:', SlashAppContext.fileBaseUrl() + data[0].uri);
        avatar.value = SlashAppContext.fileBaseUrl() + data[0].uri;
        formData.value.headImgAddress = data[0].uri;
      }

      const doSubmit = async () => {
        console.log('参数', formData.value, formInstance);
        await checkFormData(formInstance);

        return httpApi.doBatchSimpleUpdate(formData.value, props.id as string[]);
      };
      const doUpdate = async () => {
        console.log('参数', formData.value);
        await checkFormData(formInstance);
        return httpApi.doBatchSimpleUpdate(formData.value, props.id as string[]);
      };
      onMounted(async () => {
        roleOptions.value = await getRoleOptions();
        postOptions.value = await getPostOptions();
        deptOptions.value = await getDeptOptions();
        console.log('roleOptions', roleOptions.value);
      });

      return {
        avatar,
        isLockOptions,
        onSelectHeadImg,
        postOptions,
        enabledOptions,
        sexOptions,
        roleOptions,
        deptOptions,
        onSelectDept,
        formData,
        formInstance,
        formRules,
        doSubmit,
        doUpdate,
        SlashAppContext,
      };
    },
  };
</script>

<style lang="less" scoped>
  .n-form {
    padding: 5px 15px;
  }
</style>
